<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" href="css/animate.css">
	</head>
	<body>
		<div class="web">
			<!--头部-->
			<div class="top dis">
				<div class="topbox">
					<div class="logo">
						<img src="img/logotwo.png"/>
					</div>
					
					<!--导航-->
					<div class="nav">
						<span class="active"><a href="index.html">首页</a></span>
						<span><a href="chanpingongneng.html">产品功能</a></span>
						<span><a href="zifei.html">产品资费</a></span>
						<span><a href="About.html">关于我们</a></span>
						<span class="login btn"><a href="#">用户登录</a></span>
						<span class="enrol btn"><a href="zhuce.html">企业注册</a></span>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			
			<!--隐藏的头部-->
			<div class="yincang">
				<div>
					<p class="jia"><img src="img/列表.png"/></p>
					<div class="caidan">
						<p class="active"><a href="index.html">首页</a></p>
						<p><a href="chanpingongneng.html">产品功能</a></p>
						<p><a href="zifei.html">产品资费</a></p>
						<p><a href="About.html">关于我们</a></p>
						<p class="login btn"><a href="#">用户登录</a></p>
						<p class="enrol btn"><a href="#">企业注册</a></p>
					</div>
				</div>
				<div>
					<p><img src="img/logo.jpg"/></p>
				</div>
			</div>
			
			<!--banner-->
			<div class="banner">
				<h2 class="wow fadeInDown">八小时协同办公系统</h2>
				<div class="wow fadeInDown">智能管理后台，解放HR传统的管理模式，APP+PC操作模式，便捷的员工管理</div>
				<div>
					<a href="#" class="wow bounceInLeft">
						<span><img src="img/jieshao.jpg"/></span>
						<span>企业注册</span>
					</a>
					<a href="#" class="wow bounceInRight">
						<span><img src="img/开始.png"/></span>
						<span>了解功能</span>
					</a>
				</div>
			</div>
			
			<!--八小时人事-->
			<div class="human_resources">
				<h1 class="wow fadeInDown">八小时人事</h1>
				<h2 class="wow fadeInDown">你的人事管理专家</h2>
				<div class="shu"></div>
				<div class="quan"></div>
			</div>
			
			<!--档案管理-->
			<div class="archive">
				<ul>
					<li>
						<div class="pic">
							<span class="picbox wow rotateIn"><img src="img/danganguanli.png"/></span>
						</div>
						<div>档案管理</div>
						<div></div>
						<div>员工档案云存储，全方位记录员工的动态信息，支持批量导入员工信息</div>
					</li>
					<li>
						<div class="pic">
							<span class="picbox wow rotateIn"><img src="img/kaoqin.png"/></span>
						</div>
						<div>考勤管理</div>
						<div></div>
						<div>记录每时每刻员工的考勤记录，及时反馈考勤的异常情况，支持多班次打卡</div>
					</li>
					<li>
						<div class="pic">
							<span class="picbox wow rotateIn"><img src="img/xinchoushouye.png"/></span>
						</div>
						<div>薪酬管理</div>
						<div></div>
						<div>物流行业独特的计薪方式，能用于普通白领，也能适用于搬运工，小时工</div>
					</li>
					<li>
						<div class="pic">
							<span class="picbox wow rotateIn"><img src="img/zichan.png"/></span>
						</div>
						<div>资产管理</div>
						<div></div>
						<div>固定资产管理永无缺漏，独特的提醒功能让你的计审、年审等重要事件永不缺席</div>
					</li>
				</ul>
			</div>
			
			<!--大图-->
			<div class="bigpic wow bounceInLeft">
				<img src="img/界面.png"/>
			</div>
			
			<!--信息安全-->
			<div class="xinxi wow fadeInDown">
				<h1>信息安全</h1>
				<h2>Information Safety</h2>
			</div>
			
			<!--独立部署-->
			<div class="plan">
				<div class="bushu">
					<div class="planbox wow bounceInLeft plan1">
						<ul>
							<li><img src="img/bushu.png"/></li>
							<li>独立部署</li>
							<li>基于SAAS模式的独立部署模式，数据信息更安全，核心数据采用加密方式进行保存。</li>
						</ul>
					</div>
					<div class="planbox wow bounceInLeft plan2">
						<ul>
							<li><img src="img/wangluo.png"/></li>
							<li>网络安全备案</li>
							<li>8小时人事系统是通过国家网络安全备案的软件，更有效的保障客户的信息安全.</li>
						</ul>
					</div>
					<div class="planbox wow bounceInRight plan3">
						<ul>
							<li><img src="img/shujuyun.png"/></li>
							<li>数据云备份</li>
							<li>系统的所有的运行记录和数据都进行了云存储，保障客户的数据不会丢失</li>
						</ul>
					</div>
					<div class="planbox wow bounceInRight plan4">
						<ul>
							<li><img src="img/rongyu.png"/></li>
							<li>荣誉出品</li>
							<li>国内人力资源领域知名企业优领信息科技重点打造，适用于物流行业的人事系统</li>
						</ul>
					</div>
				</div>
			</div>
			
			<!--bottom-->
			<div class="bottom">
				<div>联系方式：13710415266</div>
				<div>联系地址：广州市白云区机场北路88号</div>
				<div>Copyright © 2016. 深圳优领信息科技有限公司 All rights reserved.</div>
			</div>
			
			<!--返回顶部-->
			<div class="return" onClick="gotoTop();return false;">
				<img src="img/jiantou_09.jpg"/>
			</div>
		</div>
		
		<script type="text/javascript">
			//			头部
			window.onscroll = function(){ 
			     var t = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
			     var top = document.querySelector( ".top" ); 
			     var uptop = document.querySelector( ".return" ); 
			     var logo = document.querySelector( ".logo img" ); 
			     if( t > 0 ) { 
			        top.classList.add("Creative");
			        logo.src="img/logo.jpg"
			     } else { //如果距离顶部小于300px
			        top.classList.remove("Creative");
			        logo.src="img/logotwo.png"
			     } 
			     
			     if( t == 0 ) { 
			        uptop.style.display="none"
			     } else { 
			        uptop.style.display="block"
			     } 
			} 
			
			//			返回顶部
			function gotoTop(acceleration,stime) {
			    acceleration = acceleration || 0.1;
			    stime = stime || 10;
			    var x1 = 0;
			    var y1 = 0;
			    var x2 = 0;
			    var y2 = 0;
			    var x3 = 0;
			    var y3 = 0; 
			    if (document.documentElement) {
			        x1 = document.documentElement.scrollLeft || 0;
			        y1 = document.documentElement.scrollTop || 0;
			    }
			    if (document.body) {
			        x2 = document.body.scrollLeft || 0;
			        y2 = document.body.scrollTop || 0;
			    }
			    var x3 = window.scrollX || 0;
			    var y3 = window.scrollY || 0;
			 
			    // 滚动条到页面顶部的水平距离
			    var x = Math.max(x1, Math.max(x2, x3));
			    // 滚动条到页面顶部的垂直距离
			    var y = Math.max(y1, Math.max(y2, y3));
			 
			    // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
			    var speeding = 1 + acceleration;
			    window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
			 	
			    // 如果距离不为零, 继续调用函数
			    if(x > 0 || y > 0) {
			        var run = "gotoTop(" + acceleration + ", " + stime + ")";
			        window.setTimeout(run, stime);
			    }
			    
			}
			
//			移动端头部
			function caidan(){
				var p = document.querySelector(".jia");
				var div = document.querySelector(".caidan");
				p.addEventListener("click",function(){
					if(div.style.display=="block"){
						div.style.display="none"
					}else{
						div.style.display="block"
					}
				})
				
			}
			caidan()
			
			function hover(){
				var planbox = document.querySelector(".plan1");
				var plan1 = document.querySelector(".plan1 >ul li:nth-child(1) img");
				var planbox2 = document.querySelector(".plan2");
				var plan2 = document.querySelector(".plan2 >ul li:nth-child(1) img");
				var planbox3 = document.querySelector(".plan3");
				var plan3 = document.querySelector(".plan3 >ul li:nth-child(1) img");
				var planbox4 = document.querySelector(".plan4");
				var plan4 = document.querySelector(".plan4 >ul li:nth-child(1) img");
				planbox.addEventListener("mouseover",function(){
					plan1.src="img/bushutwo.png"
				});
				planbox.addEventListener("mouseout",function(){
					plan1.src="img/bushu.png"
				});
				
				planbox4.addEventListener("mouseover",function(){
					plan4.src="img/rongyutwo.png"
				});
				planbox4.addEventListener("mouseout",function(){
					plan4.src="img/rongyu.png"
				});
				
				planbox3.addEventListener("mouseover",function(){
					plan3.src="img/shujuyuntwo.png"
				});
				planbox3.addEventListener("mouseout",function(){
					plan3.src="img/shujuyun.png"
				});
				
				planbox2.addEventListener("mouseover",function(){
					plan2.src="img/wangluotwo.png"
				});
				planbox2.addEventListener("mouseout",function(){
					plan2.src="img/wangluo.png"
				});
			}
			hover()
		</script>
		
		
		<!--动画-->
	    <script src="js/wow.js"></script>
		<script type="text/javascript">
			var w = new WOW();
			w.init()
		</script>
	</body>
</html>
